<template lang="pug">
	view.page
		navbar(@height="height" :type="type")
			view.flex.at(slot="header" style="height:100%")
				view.w50.flex.at(style="padding-left:20px")
					image(
						src="/static/dw.png",
						mode="widthFix",
						style="width:14px;margin-right:8px"
					) 商都世贸中心
		//- 模块1
		view(:style="{'background': 'url('+img+') 100% 100%','paddingTop':(h)+'px','background-size': '100% 100%'}" style="padding-bottom:0px")
			view.box.prl10
				u-search(
					placeholder="请输入"
					:showAction="false"
				)
			view.bg
				u-swiper(
					:list="list1"
					@change="change"
					@click="click"
				)
				//- 血压 血糖
				view.flex.mt10
					view.w50.box(style="padding-right:5px")
						view.bg(:style="{'background': 'url('+img1+') 100% 100%','background-size': '100% 100%'}")
							view.flex.at
								image(
									src="/static/xy.png",
									mode="widthFix",
									style="width:50px;margin-right:8px"
								)
								view
									view.f16.c3.title 血压
									view.f12.c3.mt10 blood pressure
							view.flex.at.mt10(style="text-align: center")
								view.w50.g.f14 88/122
								view.w50.g.f14 mmHg
							view.flex.at(style="text-align: center")
								view.w50.g.f14 心率
								view.w50.g.f14 88次/分钟
					view.w50.box(style="padding-left:5px")
						view.bg(:style="{'background': 'url('+img11+') 100% 100%','background-size': '100% 100%'}")
							view.flex.at
								image(
									src="/static/xt.png",
									mode="widthFix",
									style="width:50px;margin-right:8px"
								)
								view
									view.f16.c3.title 血糖
									view.f12.c3.mt10 blood sugar
							view.flex.at.mt10(style="text-align: center")
								view.w50.g.f14 88/122
								view.w50.g.f14 mmHg
							view.flex.at(style="text-align: center")
								view.w50.g.f14(style="opacity: 0") ''
								view.w50.g.f14(style="opacity: 0") ''
				view.box.mt10()
					view.bg(:style="{'background': 'url('+img1+') 100% 100%','background-size': '100% 100%'}")
						view.flex.at
							image(
								src="/static/xy.png",
								mode="widthFix",
								style="width:50px;margin-right:8px"
							)
							view
								view.f16.c3.title 睡眠
								view.f12.c3.mt10 blood pressure
						view.flex.at.mt10(style="text-align: center")
							view.w33.g.f14 88/122
							view.w33.g.f14 88次/分钟
							view.w33.g.f14 88次/分钟
						view.flex.at(style="text-align: center")
							view.w33.g.f14 呼吸
							view.w33.g.f14 心率
							view.w33.g.f14 体动
		//-分类
		view.box.prl10.mt10
			view.flex.at
				view.w33.ct(v-for="item,index in tab" @click="more(item.path)")
					image(
						:src="'/static/i/'+(index+1)+'.png'",
						mode="widthFix",
						style="width:50px;"
					)
					view.f14.c6 {{item.name}}
		//-分类2
		view.box.prl10
			view.w50(style="margin:auto")
				u-divider(
					text="大养堂"
					textColor="#00E0CF"
					lineColor="#00E0CF"
				)
			view.flex.at
				view.w33.ct(v-for="item,index in tab1"  @click="more(item.path)")
					image(
						:src="'/static/i/'+(index+4)+'.png'",
						mode="widthFix",
						style="width:50px;"
					)
					view.f14.c6 {{item.name}}
		//- 推荐医生
		view.bg(style="margin-top:10px")
			More(
				name="推荐医生"
				RightName="更多医生"
			)
			Doctor
		//- 知识讲座
		view.bg(style="margin-top:10px;")
			view(@click="more('/pages/newslist/newslist')")
				More(
					name="知识讲座"
				)
			newslist
		
		//-	真实案例
		view.bg(style="margin-top:10px;")
			view(@click="more('/pages/CaseList/CaseList')")
				More(
					name="真实案例"
				)
			CaseStudy
</template>

<script>
	import img1 from "@/static/bg2.png"
	import img2 from "@/static/b1.png"
	import img3 from "@/static/b2.png"
	import navbar from "@/components/navbar.vue"
	import newslist from "@/components/NewsList.vue"
	import CaseStudy from "@/components/CaseStudy.vue"
	import Doctor from "@/components/Doctor.vue"
	import More from "@/components/More.vue"
	export default {
		components:{
			navbar,
			newslist,
			CaseStudy,
			Doctor,
			More
		},
		data() {
			return {
				num:0,
				img:img1,
				img1:img2,
				img11:img3,
				list1: [
					'https://cdn.uviewui.com/uview/swiper/swiper1.png',
					'https://cdn.uviewui.com/uview/swiper/swiper2.png',
					'https://cdn.uviewui.com/uview/swiper/swiper3.png',
				],
				taninx:0,
				tab:[
					{
						name:'知识讲座',
						path:'/pages/newslist/newslist'
					},
					{
						name:'真实案例',
						path:'/pages/CaseList/CaseList'
					},
					{
						name:'空中课堂',
						path:'/pages/ClassRoom/ClassRoom'
					}
				],
				tab1:[
					{
						name:'公司介绍',
						path:'/pages/content/content'
					},
					{
						name:'使用案例',
						path:'/pages/newslist/newslist?title=使用案例'
					},
					{
						name:'公司新闻',
						path:'/pages/newslist/newslist?title=公司新闻'
					}
				],
				datalist:[1,2,3],
				type:1,
				h:0,
				count: 5,
				value: 2
			}
		},
		methods: {
			change(e){
				
			},
			height(e){
				this.h=e
			},
			select(e){
				this.num=e
			},
			selectTab(e){
				this.taninx=e
			},
			onPageScroll(e) {
				// console.log(e)
				e.scrollTop>=10?this.type='#ffffff':this.type=1
			},
			more(e){
				console.log(e,'ffffffff')
				uni.navigateTo({
					url:e
				})
			},
			gourl(e){
				uni.navigateTo({
					url:e
				})
			}
		}
	}
</script>

<style>
.page{
	
}
.tag{
	background:#EFEFEF;
	border-radius: 4px;
	padding: 3px 6px;
	margin-right: 6px;
}
.list{
	position: relative;
}
.adg{position: absolute;z-index: 1;top: 20px;right: 20px;background:#F93838 ;color: #fff;font-size: 12px;border-radius: 50%;width: 12px;height: 12px;text-align: center;line-height: 12px;}
.Icontent{
	background: #17D2C9;
	border-radius: 12px;
}
.butt{
	background: #fff;
	border-radius: 30px;
}
.active{
	background: #FAC505;
	border-radius: 30px;
	padding:4px 10px;
	color: #fff;
}
.l1{
	padding:4px 10px;
	font-size: 13px;
}
.log{
	width: 30px;
	border-radius: 50%;
}
.bg1{
	background: rgba(255,255,255,0.2);
	padding: 4px 10px;
}
.tabactive{
	color: #17D2C9;
	font-weight: bold;
	font-size: 16px;
}
.tabactive::before {
	content: '';
	position: absolute;
	z-index: 1;
	width: 20%;
	height: 4px;
	background: #17D2C9;
	bottom: -10px;
	left: 40%;
	
}

</style>
